<template>
  <div>
    <el-button style="background-color: #f3b33f; color: #fff" size="mini" @click="handlePrint(row)">
      <svg-icon icon-class="printer" />
      小票打印
    </el-button>
    <el-button style="background-color: #f3b33f; color: #fff" size="mini" @click="handleStickPrint(row)">
      <svg-icon icon-class="printer" />
      粘贴小票打印
    </el-button>

    <el-dialog title="打印操作" :visible.sync="dialogFormVisible" :width="'700px'">
      <el-form ref="dataForm" label-position="left" label-width="200px" class="data-form">
        <el-form-item label="打印机">
          <el-select v-model="sn" clearable placeholder="请选择打印机" class="data-form-select">
            <el-option v-for="item in printList" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="createData">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import print from '@/api/print'
  import print2 from '@/api/print2'

  export default {
    name: 'Printer',
    props: {
      row: {
        required: false,
        type: Object,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        printerQuery: {
          pageNumber: 1,
          pageSize: 999
        },
        printList: [],
        dialogFormVisible: false,
        dialogStatus: '',
        sn: ''
      }
    },
    methods: {
      async getPrintList(type) {
        this.listLoading = true
        const { data } = await print.getPrinter({ ...this.printerQuery, type })
        this.printList = data
        this.listLoading = false
      },
      async handlePrint({ orderNum }) {
        this.$confirm(`是否确定打印:${orderNum}该订单`, '打印提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await this.getPrintList(1)
          this.dialogStatus = 'print'
          this.dialogFormVisible = true
        })
          .catch(err => {
            err === 'cancel' && this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      },
      async handleStickPrint({ orderNum }) {
        this.$confirm(`是否确定粘贴打印:${orderNum}该订单`, '打印提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await this.getPrintList(2)
          this.dialogStatus = 'stick'
          this.dialogFormVisible = true
        })
          .catch(err => {
            err === 'cancel' && this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      },
      async createData() {
        const { orderId, status, printOrdinal } = this.row
        const id = orderId
        const sn = this.sn
        const { data } = this.dialogStatus === 'print' ? await print.insertPrAdmin({ id, sn }) : await print.insertPrStickAdmin({ id, sn })
        this.$message({
          type: 'success',
          message: '打印成功'
        })
        if (status === 2 && printOrdinal === null) {
          const ordinalData = {
            orderId: orderId,
            printOrdinal: data.printOrdinal
          }
          await print2.updateOrdinal(ordinalData)
        }
        this.dialogFormVisible = false
      }
    }
  }
</script>
